<template>
  <div>
    <a-modal  width="1300px" v-model:visible="selectPackageVisible" >
      <SampleComponent width="1200px" @select="selectType" ></SampleComponent>
    </a-modal>

    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" >
      <template #title>
        {{ title }}
      </template>
      <a-form  auto-label-width="true" labelAlign="right">
        <a-form-item label="主题">
          <a-textarea  v-model="carouselDto.subject" placeholder="请输入主题"></a-textarea>
        </a-form-item>

        <a-form-item label="隶属样片">
          <a-input :disabled="true" v-model="carouselDto.pageName"/>
          <a-button @click="selectPackageVisible = true">查询</a-button>
        </a-form-item>

        <a-form-item style="width: 400px" @click="selectImg" label="封面图片">

          <a-image
              height="120"
              width="120"
              :src="src"
              :preview="false"
          />

        </a-form-item>

      </a-form>
    </a-modal>

  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import type {Ref} from "vue-demi";
import ImageCompressor from "image-compressor.js";
import {ref} from "vue";
import type {CarouselDto} from "@/apis/sample/carousel";
import SampleComponent from "@/views/sample/view/component/SampleComponent.vue";
import {addCarouse, updateCarousel} from "@/apis/sample/carousel";
import {Notification} from "@arco-design/web-vue";
import {useUserStore} from "@/stores";



let file = ref(null)
const selectPackageVisible = ref(false)


/**
 * 使用index中的值进行双向绑定
 * */
const visible:Ref<Boolean> = defineModel("vis", {
  type:Boolean
  ,default:false
})

const src:Ref<string> = defineModel("src",{
  type:String
  ,default:''
})

/**
 * 表单标题
 * */

const title:Ref<String> = defineModel("tit", {type:String,default:""})

const api:Ref<String> = defineModel('api',{type:String,default:""})

const carouselDto:Ref<CarouselDto> = defineModel('dto',{
  type:Object
  ,default:{
    id:0,
    pageName: '',
    updateBy:useUserStore().userInfo.id,
    subject:'',
    ossId:'',
    updateTime:''
  }
})


/**
 * 选择图片方法
 * */
const selectImg = () => {
  let input =  document.createElement("input")

  input.type = "file"
  input.accept = "*/image"
  input.click()

  input.onchange =  (e) => {

    //@ts-ignore
    file.value = e.target?.files[0]

    let fileReader = new FileReader();

    //@ts-ignore
    fileReader.readAsDataURL(e.target?.files[0])

    fileReader.onload = function (e) {
      if (e.target == null){
        return
      }
      src.value = e.target.result as string
    }

    let img = new ImageCompressor()

    if (file.value != null) {


      img.compress(file.value, {
        quality: 0.6
      }).then(res => {
        //@ts-ignore
        file.value = res
      })


    }
  }
}

/**
 * 确定按钮点击事件
 * */
const handleOk = () => {


  visible.value = !visible.value

  /**
   * 规范表单结构
   * */

  if (carouselDto.value.pageName == null || carouselDto.value.pageName == '' ){
    Notification.warning({
      title: "隶属样片不能为空",
      content: "",
      duration: 2000
    })
    return
  }



  if (api.value == 'add'){

    let formData = new FormData();

    if (file.value != null){
      formData.append('img',file.value)
    }else {
      //用户没有上传图片
      formData.append('img',new Blob)
    }

    //@ts-ignore
    formData.append('pageName',carouselDto.value.pageName)
    //@ts-ignore
    formData.append('subject',carouselDto.value.subject)
    //@ts-ignore
    formData.append('updateBy',useUserStore().userInfo.id)




    addCarouse(formData).then(res =>{
      Notification.success({
        title: "添加成功",
        content: "添加成功",
        duration: 2000
      })

      //@ts-ignore
      emit('ok')
      src.value = ''
    })
    //清空表单
    clear()
  }

  if (api.value == 'up'){

    let formData1 = new FormData;

    if (file.value != null){
      formData1.append('img',file.value)
    }else {

      formData1.append('img',new Blob)

    }
    //@ts-ignore
    formData1.append('pageName',carouselDto.value.pageName)
    //@ts-ignore
    formData1.append('subject',carouselDto.value.subject)
    //@ts-ignore
    formData1.append('updateBy',useUserStore().userInfo.id)
    //@ts-ignore
    formData1.append('id',carouselDto.value.id)




    updateCarousel(formData1).then(res =>{
      Notification.success({
        title: "修改成功",
        content: "修改成功",
        duration: 2000
      })

      //@ts-ignore
      emit('ok')
      src.value = ''

    })
    //清空表单
    clear()
  }

}

/**
 * 取消按钮
 * */
const handleCancel = () => {
  file.value = null
  visible.value =!visible.value
  clear()

}

const selectType = (data:any) => {
  carouselDto.value.pageName = data.id
  selectPackageVisible.value = !selectPackageVisible.value

}

const clear = () =>{
  carouselDto.value.id=0
  carouselDto.value.subject=''
  carouselDto.value.pageName=''
  carouselDto.value.updateBy=''
  carouselDto.value.ossId=''

}


/**
 * 父组件更新列表方法
 * */
const emit = defineEmits(["ok"])
</script>

<style lang="scss" scoped>

</style>